<template>
  <div class="upload-container">
    <h1 class="text-3xl font-bold mb-6">上传新照片</h1>
    
    <form @submit.prevent="handleUpload" class="space-y-6">
      <div class="form-group">
        <label for="photo" class="block text-sm font-medium text-gray-700 mb-2">选择照片</label>
        <input type="file" id="photo" ref="photoInput" @change="handleFileChange" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" required>
        <div v-if="selectedFile" class="mt-4">
          <img :src="previewUrl" alt="预览图" class="max-h-64 rounded-lg border border-gray-200">
        </div>
      </div>
      
      <div class="form-group">
        <label for="title" class="block text-sm font-medium text-gray-700 mb-2">标题</label>
        <input type="text" id="title" v-model="formData.title" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="给照片起个名字" required>
      </div>
      
      <div class="form-group">
        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">描述</label>
        <textarea id="description" v-model="formData.description" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="分享这张照片背后的故事..."></textarea>
      </div>
      
      <div class="form-group">
        <label for="category" class="block text-sm font-medium text-gray-700 mb-2">分类</label>
        <select id="category" v-model="formData.category" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          <option value="">请选择分类</option>
          <option value="nature">自然风光</option>
          <option value="portrait">人像</option>
          <option value="food">美食</option>
          <option value="city">城市</option>
          <option value="travel">旅行</option>
          <option value="other">其他</option>
        </select>
      </div>
      
      <div class="form-group">
        <label class="flex items-center">
          <input type="checkbox" v-model="formData.public" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
          <span class="ml-2 text-sm text-gray-700">公开显示此照片</span>
        </label>
      </div>
      
      <div class="flex justify-end">
        <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" :disabled="isUploading">
          {{ isUploading ? '上传中...' : '上传照片' }}
        </button>
      </div>
    </form>
    
    <div v-if="uploadSuccess" class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
      <div class="flex items-center">
        <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-2 text-sm font-medium text-green-700">照片上传成功！</span>
      </div>
      <p class="mt-2 text-sm text-green-600">您的照片已成功添加到您的相册中。</p>
      <button @click="resetForm" class="mt-3 text-sm text-green-700 hover:text-green-900">上传另一张照片</button>
    </div>
    
    <div v-if="uploadError" class="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg">
      <div class="flex items-center">
        <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-2 text-sm font-medium text-red-700">上传失败</span>
      </div>
      <p class="mt-2 text-sm text-red-600">{{ uploadErrorMessage }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const photoInput = ref(null);
const selectedFile = ref(null);
const previewUrl = ref('');
const isUploading = ref(false);
const uploadSuccess = ref(false);
const uploadError = ref(false);
const uploadErrorMessage = ref('');

const formData = reactive({
  title: '',
  description: '',
  category: '',
  public: true
});

const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    selectedFile.value = file;
    previewUrl.value = URL.createObjectURL(file);
  }
};

const handleUpload = async () => {
  if (!selectedFile.value) {
    uploadError.value = true;
    uploadErrorMessage.value = '请选择一张照片';
    return;
  }

  isUploading.value = true;
  uploadError.value = false;
  uploadSuccess.value = false;

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 实际项目中应该使用fetch或axios发送数据到后端
    // 例如:
    // const formDataToSend = new FormData();
    // formDataToSend.append('photo', selectedFile.value);
    // formDataToSend.append('title', formData.title);
    // formDataToSend.append('description', formData.description);
    // formDataToSend.append('category', formData.category);
    // formDataToSend.append('public', formData.public);
    
    // const response = await fetch('/api/photos/upload', {
    //   method: 'POST',
    //   body: formDataToSend
    // });
    
    // if (!response.ok) {
    //   throw new Error('上传失败');
    // }
    
    uploadSuccess.value = true;
    resetForm();
  } catch (error) {
    uploadError.value = true;
    uploadErrorMessage.value = error.message || '上传过程中发生错误';
  } finally {
    isUploading.value = false;
  }
};

const resetForm = () => {
  photoInput.value.value = '';
  selectedFile.value = null;
  previewUrl.value = '';
  formData.title = '';
  formData.description = '';
  formData.category = '';
  formData.public = true;
};

onMounted(() => {
  // 检查用户是否已登录
  // 如果未登录，重定向到登录页面
  // const user = localStorage.getItem('user');
  // if (!user) {
  //   router.push('/login');
  // }
});
</script>

<style scoped>
.upload-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}
</style>    